---
title: Grupos de listas
description: Una guía para usar Fluid DnD con un grupo de listas.
---

import ListGroup from "@/components/vue/ListGroup.vue";
import ListGroups from "@/components/vue/ListGroups.vue";
import { Code } from "@astrojs/starlight/components";

### Ejemplo de listas de números

Con **Fluid DnD** tu puedes hacer drag and drop entre dos listas o más.\
Definiremos dos listas y pasamos al parametro `droppableGroup` el mismo nombre de grupo:

export const highlightsListOfNumbers = ["droppableGroup", "group1"];

export const listOfNumbers = `<script setup lang="ts">
...
const list = ref([1, 2, 3, 4]);
const [ parent1 ] = useDragAndDrop(list, {
  droppableGroup: "group1",
});
...
const list2 = ref([5, 6, 7, 8]);
const [ parent2 ] = useDragAndDrop(list2, {
  droppableGroup: "group1",
  direction: "horizontal",
});
</script>`;

<Code code={listOfNumbers} lang="vue" mark={highlightsListOfNumbers} />

### Creando la vista

Después, creamos las dos listas en la vista:

export const listOfNumbersDraggable = `
<template>
  <div class="group-list">
    <ul ref="parent1" class="number-list">
      <li
        class="number"
        v-for="(element, index) in list"
        :index
        :key="element"
      >
        {{ element }}
      </li>
    </ul>
    <div ref="parent2" class="number-list-h">
      <div
        class="number"
        v-for="(element, index) in list2"
        :index
        :key="element"
      >
        {{ element }}
      </div>
    </div>
  </div>
</template>
<style>
 ...
</style>
`;

export const highlightsDraggable = ["parent1", "parent2"];

<Code code={listOfNumbersDraggable} lang="vue" mark={highlightsDraggable} />

### Resultado

<div class="pl-8">
  <ListGroup client:load />
</div>

## Más de un grupo

Una lista puede pertenecer a más de un grupo. Tu solo puedes arrastrar elementos de una lista a otra
si estos grupos a los cuales pertenece se encuentran en la otra lista.

Ejemplo: Si la lista **A** pertenece al grupo **G1** y la lista **B** a los grupos **G1** y **G2**.
Tu solo puede arrastrar elementos de la lista **A** a la **B** no al revés.

### Ejemplo

Cambiaremos el código anterior adding otro grupo:

export const highlightsListOfNumbersGroups = ["group2"];

export const listOfNumbersGroups = `<script setup lang="ts">
...
const list1 = ref([1, 2, 3, 4]);
const [ parent1 ] = useDragAndDrop(list1, {
  droppableGroup: "group1",
});
...
const list2 = ref([5, 6, 7, 8]);
const [ parent2 ] = useDragAndDrop(list2, {
  droppableGroup: "group1 group2",
  direction: "horizontal",
});
</script>`;

<Code
  code={listOfNumbersGroups}
  lang="vue"
  mark={highlightsListOfNumbersGroups}
/>

### Resultado

<div class="pl-8">
  <ListGroups client:load />
</div>
